<template>
  <div class="barContent">
    <div ref="chartDom" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script lang="ts">
let myChart = null;
import * as echarts from 'echarts';
import { ref } from "vue"
export default {
  name: "LineChart",
  components: {
    echarts,
  },
  props: ["echartsClass", "echartsData"],
  setup() {
    const chartDom: any = ref(null);
    return {
      chartDom
    };
  },
  created() { },
  beforeCreate() { },
  mounted() {
    myChart = echarts.init(this.chartDom);
    this.initChart();
  },
  methods: {
    initChart() {
      switch (this.echartsClass) {
        case "normalLine":
          this.normalLine();
          break;
        case "initChartByOption":
          this.initChartByOption();
          break;
        case "speedLine":
          this.speedLine();
          break;
      }
    },
    //直接传入option进行初始化--外部构造option
    initChartByOption() {
      let option = {
        title: {
          text: "",
          subtext: "",
          left: "center",
          align: "right",
        },
        grid: {
          bottom: 20,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765",
            },
          },
        },
        legend: {
          data: ["水位", "累计降雨量"],
          left: 20,
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: [
              "2009/6/12 2:00",
              "2009/6/12 3:00",
              "2009/6/12 4:00",
              "2009/6/12 5:00",
              "2009/6/12 6:00",
              "2009/6/12 7:00",
              "2009/6/12 8:00",
              "2009/6/12 9:00",
              "2009/6/12 10:00",
            ].map(function (str) {
              return str.replace(" ", "\n");
            }),
          },
        ],
        yAxis: [
          {
            name: "流量(m^3/s)",
            type: "value",
            max: 500,
          },
          {
            name: "降雨量(mm)",
            nameLocation: "start",
            max: 5,
            type: "value",
            inverse: true,
          },
        ],
        series: [
          {
            name: "流量",
            type: "line",
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            markArea: {
              silent: true,
              data: [
                "2009/6/12 2:00",
                "2009/6/12 3:00",
                "2009/6/12 4:00",
                "2009/6/12 5:00",
                "2009/6/12 6:00",
                "2009/6/12 7:00",
                "2009/6/12 8:00",
                "2009/6/12 9:00",
                "2009/6/12 10:00",
              ],
            },
            data: [0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6],
          },
          {
            name: "降雨量",
            type: "bar",
            yAxisIndex: 1,
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1,
            },
            markArea: {
              silent: true,
              data: [
                "2009/6/12 2:00",
                "2009/6/12 3:00",
                "2009/6/12 4:00",
                "2009/6/12 5:00",
                "2009/6/12 6:00",
                "2009/6/12 7:00",
                "2009/6/12 8:00",
                "2009/6/12 9:00",
                "2009/6/12 10:00",
              ],
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      if (this.echartsData) {
        option = this.echartsData;
      }
      myChart.setOption(option);
    },
    // 实时监控-详情-左下角图
    normalLine() {
      var data = {
        title: "",
        xAxisData: ['2021-09-07', '2021-09-08'],
        yAxisData: [6, 10],
      };
      if (this.echartsData) {
        data = this.echartsData;
      }
      myChart.clear();
      myChart.setOption(
        {
          title: {
            text: data.title,
            left: 'center',
            top: 20,
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params: any) {
              let str = "时间：" + params[0].axisValue + "<br />" + "速度：" + params[0].value + " km/h";
              return str;
            },
          },
          grid: {
            top: '15%',
            left: '8%',
            right: '8%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.xAxisData,
            axisLabel: {
              formatter: function (value: any) {
                return value.slice(5);
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "速度(km/h)"
          },
          series: [
            {
              type: 'line',
              smooth: true,
              data: data.yAxisData,
              // markLine: {
              //   symbol: ['none', 'none'], // 去掉箭头
              //   label: {
              //     show: false,
              //     position: 'start',
              //     formatter: '{b}'
              //   },
              //   data: [
              //     {
              //       name: '阈值',
              //       yAxis: 0.8
              //     }
              //   ],
              //   lineStyle: {
              //     color: '#0066FF'
              //   }
              // }
            }
          ],
        }
      );
    },
    // 轨迹跟踪-速度-右上角图
    speedLine() {
      var data = {
        title: "",
        xAxisData: [],
        yAxisData: [6, 10],
      };
      if (this.echartsData.xAxisData) {
        data = this.echartsData;
      }
      myChart.clear();
      myChart.setOption(
        {
          title: {
            text: data.title,
            left: 'center',
            top: 20,
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              let str = "时间：" + params[0].axisValue + "<br />" + "速度：" + params[0].value + " km/h";
              return str;
            },
          },
          grid: {
            top: '25%',
            left: '8%',
            right: '8%',
            bottom: '0',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: data.xAxisData,
            axisLabel: {
              interval: (index, value) => {
                return false
              }
            }
          },
          yAxis: {
            type: 'value',
            name: "速度(km/h)"
          },
          series: [
            {
              type: 'line',
              smooth: true,
              data: data.yAxisData,
            }
          ],
        }
      );
    },
    resize() {
      myChart.resize();
    }
  },
  watch: {
    echartsData: {
      handler: function () {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style>
.barContent {
  height: 100%;
  width: 100%;
}
</style>
